<template>
  <div class="home">
        <Header head-title="门诊挂号" go-back="true"></Header>
        <section class="bg_blue Registed Selects">
            <img class="HosIcon" src="../../assets/img/41692556-8.jpg" alt="">
            <h2 class="fontsB fontCfff">平顶山市第一人民医院</h2>
            <section class="Select RegistBtn">
                <el-button size="small">三级甲等</el-button>
                <el-button size="small">综合医院</el-button>
            </section>
            <section class="Select RegistBtn RegistBtn1">
                <el-rate v-model="value" disabled show-score text-color="#fff" score-template="好评率{value}">
                </el-rate>
            </section>
        </section>
        <section class="group group1 RegistKS">
            <el-tabs v-model="activeName" @tab-click="handleClick">
                <el-tab-pane label="按科室挂号" name="first">
                    <el-tabs :tab-position="tabPosition" style="height: 50vh;">
                        <el-tab-pane :label="hosIn.name" v-for="hosIn in HosList" :key="hosIn" style="height:50vh;overflow-y: auto;">
                            <ul v-for="item in hosIn.list" :key="item">
                                <li class="fonts KSlist" @click="ToKeshi()">
                                    {{ item.name }}
                                </li>
                            </ul>
                        </el-tab-pane>
                    </el-tabs>
                </el-tab-pane>
                <el-tab-pane label="挂号规则" name="second" class="GuiZe">
                    <h3 class="fonts HomeH">预约规则</h3>
                    <p class="fonts">
                        1、特别提醒：确认挂号后请在预约时间到预约医院就诊，过期作废。如需要取消挂号单，请去预约医院办理。
                    </p>
                    <h3 class="fonts HomeH">医院规则</h3>
                    <p class="fonts">
                        1、放号时间：每天8：30
                    </p>
                    <p class="fonts">
                        2、预约周期：一周（7天）
                    </p>
                    <p class="fonts">
                        3、取消时限：就诊前一天
                    </p>
                    <p class="fonts">
                        4、取号方式，医院窗口或者自动取号机取号
                    </p>
                </el-tab-pane>
            </el-tabs>
        </section>
  </div>
</template>

<script>
import Header from '../../components/Header'
export default {
  data () {
    return {
      value: '3.7',
      activeName: 'first',
      tabPosition: 'left',
      HosList: [{
        name: '儿科',
        list: [{ name: '儿科发热' },
          { name: '儿科发热' },
          { name: '儿科发热' },
          { name: '儿科发热' },
          { name: '儿科发热' },
          { name: '儿科发热' },
          { name: '儿科发热' }]
      }, {
        name: '妇科',
        list: [{ name: '儿科发热' },
          { name: '妇科门诊1' },
          { name: '妇科门诊1' },
          { name: '妇科门诊1' },
          { name: '妇科门诊1' },
          { name: '妇科门诊1' },
          { name: '妇科门诊1' },
          { name: '妇科门诊1' },
          { name: '妇科门诊1' },
          { name: '妇科门诊1' },
          { name: '妇科门诊1' },
          { name: '妇科门诊1' }
        ]
      }, {
        name: '产科',
        list: [{ name: '产科门诊2' },
          { name: '产科门诊2' }]
      }, {
        name: '内科',
        list: [{ name: '内科门诊3' },
          { name: '内科门诊3' },
          { name: '内科门诊3' },
          { name: '内科门诊3' },
          { name: '内科门诊3' }]
      }, {
        name: '住院',
        list: [{ name: '住院病理1' },
          { name: '住院病理1' },
          { name: '住院病理1' },
          { name: '住院病理1' },
          { name: '住院病理1' },
          { name: '住院病理1' },
          { name: '住院病理1' },
          { name: '住院病理1' },
          { name: '住院病理1' }]
      }]
    }
  },
  components: {
    Header
  },
  methods: {
    handleClick (tab, event) {
      // console.log(tab, event)
    },
    //  点击进入科室  挂号
    ToKeshi () {
      this.$router.push({
        path: '/ToKeshi'
      })
    }
  }
}
</script>

<style scoped>
.home {
    padding-top: 0.8rem;
}
.group1 {
    padding-top: 0;
    margin-top: 0;
}
</style>
